<template>
    <div class="login">
        <!-- 登录 -->
        <el-card shadow="hover" class="card" v-if="flag == 1">
            <h1 class="center">Kunke</h1>
            <div class="form">
                <el-form ref="form" :model="form" :rules="loginRules">
                    <el-form-item prop="username">
                        <el-input v-model="form.username" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="form.password" placeholder="请输入密码" show-password></el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <div class="flex">
                            <div class="flex-input">
                                <el-input v-model="form.code" placeholder="请输入验证码"></el-input>
                            </div>
                            <div v-loading="codeLoading">
                                <el-image :src="imageUrl" style="width: 100px; height: 40px"></el-image>
                            </div>
                        </div>

                    </el-form-item>
                </el-form>
            </div>
            <div class="login-btn">
                <el-button type="primary" @click="login" :loading="loginLoading">登 录</el-button>
            </div>
            <el-divider>其他登录方式</el-divider>
            <div class="other-login">
                <el-button icon="el-icon-delete" round size="medium"></el-button>
                <el-button icon="el-icon-delete" round size="medium"></el-button>
                <el-button icon="el-icon-delete" round size="medium"></el-button>
            </div>
            <div class="bottom-login-r">
                <el-link :underline="false" @click="changePage(2)">无账号？立即注册</el-link>
            </div>
        </el-card>
        <!-- 注册 -->
        <el-card shadow="hover" class="card" v-if="flag == 2">
            <h1 class="center">Kunke</h1>
            <div class="form">
                <el-form ref="form" :model="form" :rules="loginRules">
                    <el-form-item prop="username">
                        <el-input v-model="form.username" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="form.password" placeholder="请输入密码" show-password></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="form.passwordAgain" placeholder="请再次输入密码" show-password></el-input>
                    </el-form-item>
                    <el-form-item prop="email">
                        <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <div class="flex">
                            <div class="flex-input">
                                <el-input v-model="form.code" placeholder="请输入验证码"></el-input>
                            </div>
                            <div>
                                <el-button @click="sendEmailCode" v-if="!showTime">发送验证码</el-button>
                                <el-button v-else disabled>倒计时：{{ getTime }}</el-button>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <div class="login-btn">
                <el-button type="primary" @click="register" :loading="registerLoading">注 册</el-button>
            </div>
            <div class="bottom-login-l">
                <el-link :underline="false" @click="changePage(1)">有账号！立即登录</el-link>
            </div>
        </el-card>
    </div>
</template>
  
<script>
import md5 from 'js-md5';
import { reqCode, reqSendCode, reqRegister } from '@/api/user'
export default {
    name: "login",
    data() {
        return {
            form: {
                username: null,
                password: null,
                passwordAgain: null,
                email: null,
                code: null,
                uuid: null,
            },
            imageUrl: "getCode",
            loginRules: {
                username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
                code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
            },
            codeLoading: false,
            loginLoading: false,
            registerLoading: false,
            flag: 1,
            // 倒计时
            getTime: 60,
            // 是否展示倒计时
            showTime: false
        }
    },
    mounted() {
        this.jugeType();
        this.getCode();
    },
    methods: {
        jugeType(){
            // 判断是登录还是注册
            const type = this.$route.query.type;
            if(!type || type == 1){
                this.flag = 1;
            } else{
                this.flag = 2;
            }
        },
        getCode() {
            this.codeLoading = true
            reqCode({ checkCodeType: 'code:' }).then((res) => {
                this.codeLoading = false
                this.form.uuid = res.data.uuid
                this.imageUrl = res.data.image
            }).catch((error) => {
                console.log(error)
            })
        },
        login() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.loginLoading = true
                    let requestForm = {
                        username: this.form.username,
                        password: md5(this.form.password),
                        uuid: this.form.uuid,
                        checkCodeType: "code:",
                        code: this.form.code
                    }
                    this.$store.dispatch("login", requestForm).then((res) => {
                        this.loginLoading = false
                        this.$message.success(res.message)
                        setTimeout(() => {
                            this.$router.push("/index")
                        }, 200);
                    }).catch((error) => {
                        this.loginLoading = false
                        this.$message.error(error.message)
                    })
                }
            });
        },
        changePage(idx) {
            this.form = {}
            this.flag = idx
        },
        sendEmailCode() {
            if (!this.form.email) {
                this.$message.warning("邮箱不能为空")
                return;
            }
            reqSendCode({ email: this.form.email }).then((res) => {
                // 倒计时
                this.showTime = true;
                let timer = setInterval(() => {
                    this.getTime -= 1;
                    if (this.getTime <= 0) {
                        clearInterval(timer);
                        this.showTime = false;
                        this.getTime = 60;
                    }
                }, 1000);
                this.$message.success(res.message)
            }).catch((error) => {
                this.$message.error(error.message)
            })
        },
        register() {
            this.$refs["form"].validate(async valid => {
                if (valid) {
                    let requestForm = {
                        username: this.form.username,
                        password: md5(this.form.password),
                        passwordAgain: md5(this.form.passwordAgain),
                        email: this.form.email,
                        code: this.form.code
                    }
                    if (requestForm.password != requestForm.passwordAgain) {
                        this.$message.warning("两次密码输入不一致");
                        return;
                    }
                    this.registerLoading = true;
                    reqRegister(requestForm).then((res) => {
                        this.registerLoading = false;
                        this.$message.success(res.message);
                    }).catch((error) => {
                        this.registerLoading = false;
                        this.$message.error(error.message);
                    })
                }
            });
        },
    },
}
</script>
  
<style scoped>
.login {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
}

.card {
    width: 400px;
    height: 500px;
    position: relative;
}

.center {
    text-align: center;
    margin-bottom: 20px;
}

.form {
    width: 300px;
    margin: 0 auto;
}

.flex {
    display: flex;
    justify-content: space-between;
    height: 40px;
}

.flex-input {
    width: calc(100% - 105px);
    height: 40px;
}

.login-btn {
    margin: 40px 0;
    width: 100%;
    text-align: center;
}

.login-btn button {
    width: 300px;
}

.other-login {
    text-align: center;
}

.bottom-login-r {
    position: absolute;
    bottom: 15px;
    right: 20px;
    font-size: 14px;
    cursor: pointer;
}

.bottom-login-l {
    position: absolute;
    bottom: 15px;
    left: 20px;
    font-size: 14px;
    cursor: pointer;
}
</style>